<template>
  <ElMenu :default-active="pageData.activeMenu" class="app-menu-wrap" @select="handleSelect">
    <AppMenuInner v-for="item in menuList" :menuItem="item" :key="item.index"></AppMenuInner>
  </ElMenu>
</template>
<script setup>
import AppMenuInner from './AppMenuInner.vue'
import { ref, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useGlobalStore from '@/stores/global'

const globalStore = useGlobalStore()

const route = useRoute()
const router = useRouter()

const pageData = ref({
  activeMenu: '',
})
const menuList = ref([])

const hideAside = computed(() => {
  return route.meta && route.meta.hideAside
})
watch(
  () => globalStore.menuList,
  () => {
    menuList.value = globalStore.menuList
  },
)
onMounted(async () => {
  // 路由的值需要setTimeout才能获取到
  setTimeout(async () => {
    if (!hideAside.value) {
      menuList.value = globalStore.menuList
    }
    pageData.value.activeMenu = route.name
  })
})

function handleSelect(index) {
  router.push({ name: index })
}
</script>
<style lang="less">
.el-menu.app-menu-wrap {
  border-right: none;
  height: 100%;

  .el-menu-item.is-active {
    background-color: #ecefff;
  }
}
</style>
